<template>
  <el-table
    v-loading="loading"
    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    :data="tableData"
    border
    :stripe="true"
    style="width: 100%"
  >
    <el-table-column
      v-if="date"
      prop="dateStr"
      :label="$t('reportModule.loanDate.date')"
      min-width="120"
    />
    <el-table-column
      prop="paymentAmount"
      :label="tableText['payMoney']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['paymentAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="paymentPrincipalAmount"
      :label="tableText['principal']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['paymentPrincipalAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dueRepayAmount"
      :label="tableText['shouldRepayPrincipal']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['dueRepayAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="overdueAmount"
      :label="tableText['historyOverdue']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['overdueAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="overdueRepaymentAmount"
      :label="tableText['overdue']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['overdueRepaymentAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="firstDueRate"
      :label="tableText['firstDueRate']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['firstDueRate'] ? (scope.row['firstDueRate'] * 100).toFixed(2) + '%' : 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dueRate"
      :label="tableText['overdueRate']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['dueRate'] ? (scope.row['dueRate'] * 100).toFixed(2) + '%' : 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="doneAmount"
      :label="tableText['settled']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['doneAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="realRepayAmount"
      :label="tableText['currentRepay']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['realRepayAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="doneOrderRepayAmount"
      :label="tableText['shouldRepay']"
      min-width="150"
    >
      <template slot-scope="scope">
        {{ scope.row['doneOrderRepayAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dueAmount1_7"
      :label="tableText['one']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['paymentAmount'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dueAmount8_14"
      :label="tableText['two']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['dueAmount8_14'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dueAmount15_30"
      :label="tableText['three']"
      min-width="150"
    >
      <template slot-scope="scope">
        {{ scope.row['dueAmount15_30'] || 0 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dueAmount30"
      :label="tableText['four']"
      min-width="120"
    >
      <template slot-scope="scope">
        {{ scope.row['dueAmount30'] || 0 }}
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
export default {
  name: 'VtgLoanAmount',
  props: {
    loading: {
      default: false,
      type: Boolean
    },
    date: {
      default: false,
      type: Boolean
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tableText: this.$t('reportModule.loanDate.amount')
    }
  }
}
</script>

<style scoped>

</style>
